<template>
  <div class="user-card-info">
    <div class="user-card-info-t">
      <div class="user-card-info-t-l">
        <p class="user-card-info-t-l-title">
          基础信息 <span class="el-icon-edit-outline" @click="handleEditUpdate()"   v-hasPermi="['system:user:add']">编辑</span>
        </p>
        <p class="user-card-info-t-l-line">
          <span>姓名</span>
          {{ form ? form.nickName : '' }}
        </p>
        <p class="user-card-info-t-l-line">
          <span>性别</span>
          <dict-tag v-if="form" :options="dict.type.sys_user_sex" :value="form.sex"/>
        </p>
        <!--        <p class="user-card-info-t-l-line">-->
        <!--          <span>民族</span>-->
        <!--        </p>-->
        <!--        <p class="user-card-info-t-l-line">-->
        <!--          <span>出生日期</span>-->
        <!--          {{ form ? form.nickName : '' }}-->
        <!--        </p>-->
        <p class="user-card-info-t-l-line">
          <span>籍贯住址</span>
          {{ form ? form.address : '' }}
        </p>
        <p class="user-card-info-t-l-line">
          <span>身份证号</span>
          {{ form ? form.idNumber : '' }}
        </p>
        <p class="user-card-info-t-l-line">
          <span>签发机关</span>
          {{ form ? form.policeStation : '' }}
        </p>
        <p class="user-card-info-t-l-line">
          <span>有效日期</span>
          {{ form ? form.period : '' }}
        </p>
      </div>
      <div class="user-card-info-t-r">
        <div class="user-card-info-t-l-box">
          <el-avatar shape="square" :size="150" :src="form.idFrontPic" v-if="form && $isNotEmpty(form.idFrontPic)"/>
          <img src="@/assets/images/no_pic.png" alt="" v-else>
          <p>身份证（人脸面）</p>
        </div>
        <div class="user-card-info-t-l-box">
          <el-avatar shape="square" :size="150" :src="form.idBackPic" v-if="form && $isNotEmpty(form.idFrontPic)"/>
          <img src="@/assets/images/no_pic.png" alt="" v-else>
          <p>身份证（国徽面）</p>
        </div>
      </div>
    </div>
    <div class="user-card-info-t">
      <div class="user-card-info-t-l">
        <p class="user-card-info-t-l-title">
          人脸采集
        </p>
        <p class="user-card-info-t-l-line">
          <span>采集说明</span>
          完成人脸采集，并通过验证，才能人脸打卡
        </p>
      </div>
      <div class="user-card-info-t-l">
        <div class="user-card-info-t-l-box">
          <el-avatar shape="square" :size="150" :src="form.facePic" v-if="form && $isNotEmpty(form.facePic)"/>
          <img src="@/assets/images/no_pic.png" alt="" v-else>
        </div>
      </div>
    </div>
    <detailUser :visible.sync="detailVisible" :paramId="paramId" @getInit="getInit"></detailUser>
  </div>
</template>

<script>
import detailUser from "@/components/personnel/detail"

export default {
  dicts: ['sys_user_sex', 'sys_work_type'],
  name: "userInfo",
  components: {detailUser},
  props: ['form', 'paramId'],
  data(){
    return{
      detailVisible: false,
    }
  },
  methods:{
    handleEditUpdate(row){
      this.detailVisible = true
    },
    getInit(){
      this.$emit('getInit')
    }
  }
}
</script>

<style scoped>
.user-card-info-t {
  display: flex;
  font-size: 12px;
  border-bottom: #f4f4f4 3px solid;
  padding: 20px 0;
}

.user-card-info-t:last-child {
  border-bottom: none;
}

.user-card-info-t-l {
  padding-right: 80px;
}

.user-card-info-t-l-title {
  font-weight: 500;
  font-size: 14px;
}

.user-card-info-t-l-title span {
  color: #2a99ff;
  font-size: 12px;
  margin-left: 5px;
  cursor: pointer;
}

.user-card-info-t-l-title span:hover {
  text-decoration: underline;
}

.user-card-info-t-r {
  display: flex;
}

.user-card-info-t-l-box {
  margin-right: 30px;
}

.user-card-info-t-l-line {
  display: flex;
}

.user-card-info-t-l-line span {
  display: block;
  width: 120px;
  color: rgba(0, 0, 0, .3);
}

.user-card-info-t-l-box img {
  width: 150px;
}

.user-card-info-t-l-box p {
  color: rgba(0, 0, 0, .3);
}
</style>
